<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #ffffff;
            position: relative;
        }
        /* 确保容器宽度一致 */
        .container-wrapper {
            max-width: 414px;
            margin: 0 auto;
        }
        /* 主色调蓝紫色 */
        .primary-color {
            color: #6366f1; /* indigo-500 */
        }
        .primary-bg {
            background: #6366f1;
        }
        .primary-light-bg {
            background: #eef2ff; /* indigo-50 */
        }
        /* 卡片浅灰背景 */
        .card-bg {
            background: #f9fafb; /* gray-50 */
        }
        /* 黄色浮动按钮 */
        .fab {
            position: fixed;
            bottom: 90px; /* 增加距离，避免与底部导航重叠 */
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #FBBF24; /* yellow-400 */
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        .fab:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(251, 191, 36, 0.5);
        }
        .fab:active {
            transform: scale(0.95);
        }
        /* Banner轮播 */
        .banner-container {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            min-height: 170px; /* 优化后的Banner高度 */
            margin: 0 -16px; /* 扩展到屏幕边缘 */
            background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
            z-index: 1;
        }
        /* 统计卡片强调数字 */
        .stat-number {
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.2;
        }
        @media (max-width: 375px) {
            .stat-number {
                font-size: 1.5rem;
            }
        }
        /* 小屏幕适配 */
        @media (max-width: 320px) {
            .section-spacing {
                margin-bottom: 20px;
            }
            .banner-container {
                min-height: 180px;
            }
        }
        /* 防止文字溢出 */
        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 留白充足 */
        .section-spacing {
            margin-bottom: 24px;
        }
        /* 底部导航栏高度和点击区域 */
        .bottom-nav {
            height: 64px;
        }
        .bottom-nav-item {
            padding: 8px 12px;
            min-height: 44px; /* 确保点击区域足够大 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .bottom-nav-item:active {
            opacity: 0.7;
        }
        /* 安全区域适配（iPhone X等） */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-nav-wrapper {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
        /* 按钮点击效果 */
        .clickable {
            transition: all 0.2s ease;
        }
        .clickable:active {
            transform: scale(0.98);
            opacity: 0.8;
        }
        /* 快速提交表单卡片 */
        .quick-form-card {
            background: white;
            border-radius: 16px;
            padding: 16px;
            margin: -40px 16px 0 16px;
            position: relative;
            z-index: 20;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        /* 横向滚动标签 */
        .scrollable-tabs {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 16px 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .scrollable-tabs::-webkit-scrollbar {
            display: none;
        }
        .tab-item {
            padding: 8px 20px;
            border-radius: 20px;
            white-space: nowrap;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .tab-item.active {
            background: #6366f1;
            color: white;
        }
        .tab-item:not(.active) {
            background: #f3f4f6;
            color: #6b7280;
            border: 1px solid #e5e7eb;
        }
        /* 服务案例卡片网格 */
        .case-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
        }
        .case-card:active {
            transform: scale(0.98);
        }
        .case-image {
            width: 100%;
            height: 140px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            position: relative;
            overflow: hidden;
        }
        .case-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
        }
        .case-image i {
            position: relative;
            z-index: 2;
        }
        .case-content {
            padding: 12px;
        }
        /* 主按钮（类似参考图的粉色按钮） */
        .primary-button {
            background: #6366f1;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 14px;
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .primary-button:active {
            background: #4f46e5;
            transform: scale(0.98);
        }
    </style>
</head>
<body class="bg-white">
    <!-- 顶部标题栏 -->
    <!-- <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-40 container-wrapper">
        <div class="text-lg font-semibold text-gray-800">首页</div>
        <div class="relative cursor-pointer clickable" onclick="alert('通知功能')" aria-label="通知">
            <i class="fas fa-bell text-gray-600 text-xl"></i>
            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-medium">3</span>
        </div>
    </div> -->

    <!-- 主体内容区域 -->
    <div class="pb-24">
        <!-- 1. Banner -->
        <div class="banner-container relative" style="min-height: 200px;">
            <div class="banner-overlay"></div>
            <div class="text-white relative z-10" style="padding: 60px 20px 70px;">
                <div class="text-left px-4">
                    <div class="text-xl font-bold mb-2 leading-tight">专业服务，值得信赖</div>
                    <div class="text-sm opacity-90 mb-3">为企业提供智能化解决方案</div>
                    <button class="bg-white bg-opacity-20 border border-white border-opacity-30 rounded-full px-4 py-2 text-xs font-medium inline-flex items-center space-x-2 clickable ml-0.5">
                        <span>了解详情</span>
                        <i class="fas fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 2. 快速提交需求表单卡片（叠加在Banner上） -->
        <div class="quick-form-card">
            <div class="mb-3 relative" id="serviceTypeDropdown">
                <div class="flex items-center justify-between mb-2 cursor-pointer"
                     onclick="toggleServiceTypeDropdown()" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="选择服务类型">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-tag text-indigo-500"></i>
                        <span class="text-sm font-medium text-gray-700">服务类型</span>
                    </div>
                    <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
                </div>
                <div id="selectedServiceType" class="text-base text-gray-800 font-medium cursor-pointer"
                     onclick="toggleServiceTypeDropdown()">
                    企业服务
                </div>
                <!-- 下拉菜单 -->
                <div id="serviceTypeOptions"
                     class="absolute left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-md mt-2 z-30 hidden">
                    <div onclick="selectServiceType('企业服务')" class="px-4 py-2 hover:bg-indigo-50 cursor-pointer text-gray-800 text-base">企业服务</div>
                    <div onclick="selectServiceType('管理咨询')" class="px-4 py-2 hover:bg-indigo-50 cursor-pointer text-gray-800 text-base">管理咨询</div>
                    <div onclick="selectServiceType('AI+RPA')" class="px-4 py-2 hover:bg-indigo-50 cursor-pointer text-gray-800 text-base">AI+RPA</div>
                    <div onclick="selectServiceType('流程自动化')" class="px-4 py-2 hover:bg-indigo-50 cursor-pointer text-gray-800 text-base">流程自动化</div>
                    <div onclick="selectServiceType('数字化转型')" class="px-4 py-2 hover:bg-indigo-50 cursor-pointer text-gray-800 text-base">数字化转型</div>
                </div>
            </div>
            <script>
                // 下拉显隐切换
                function toggleServiceTypeDropdown() {
                    const dropdown = document.getElementById('serviceTypeOptions');
                    dropdown.classList.toggle('hidden');
                }
                // 选择服务类型
                function selectServiceType(name) {
                    document.getElementById('selectedServiceType').textContent = name;
                    document.getElementById('serviceTypeOptions').classList.add('hidden');
                }
                // 点击外部关闭下拉
                document.addEventListener('click', function(event) {
                    const dropdown = document.getElementById('serviceTypeDropdown');
                    const options = document.getElementById('serviceTypeOptions');
                    if (!dropdown.contains(event.target)) {
                        options.classList.add('hidden');
                    }
                });
            </script>
            <div class="mb-3 pb-3 border-b border-gray-200">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-calendar text-indigo-500"></i>
                        <span class="text-sm font-medium text-gray-700">需求描述</span>
                    </div>
                </div>
                <textarea 
                    class="form-input resize-none text-sm text-gray-800 w-full h-10 mt-1"
                    placeholder="请简要描述您的需求..." 
                    rows="1"
                    style="min-height:30px;max-height:200px;"
                ></textarea>
            </div>
            <button class="primary-button" onclick="window.location.href='customer-quotation-total.html'">
                <i class="fas fa-search mr-2"></i>
                AI智能报价
            </button>
        </div>

        <!-- 只显示一条任务通知进度卡片 -->
        <div class="px-4 mt-6">
            <div class="flex pb-2">
                <div class="flex-1 bg-white rounded-lg shadow flex flex-col justify-between p-3 min-w-0">
                    <div class="flex items-center mb-1">
                        <div class="flex justify-between w-full items-center">
                            <div class="flex items-center min-w-0">
                                <i class="fas fa-tasks text-gray-400 mr-2"></i>
                                <span class="text-sm text-gray-700 truncate">我们公司的RAP搭建需求...</span>
                            </div>
                            <div class="ml-3 flex-shrink-0">
                                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">进行中</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. 热门服务类型（横向滚动标签） -->
        <div class="px-4 mt-6">
            <div class="text-lg font-bold text-gray-800 mb-3">热门服务</div>
            <div class="scrollable-tabs">
                <!-- <div class="tab-item active" onclick="filterCases('all')">全部</div> -->
                <div class="tab-item active" onclick="filterCases('enterprise')">企业服务</div>
                <div class="tab-item" onclick="filterCases('consulting')">管理咨询</div>
                <div class="tab-item" onclick="filterCases('rpa')">AI+RPA</div>
                <!-- <div class="tab-item" onclick="filterCases('automation')">流程自动化</div>
                <div class="tab-item" onclick="filterCases('digital')">数字化转型</div> -->
            </div>
        </div>

        <!-- 4. 服务案例网格（2列布局） -->
        <div class="px-4 mt-4 mb-6">
            <div class="grid grid-cols-2 gap-3">
                <!-- 案例卡片1 -->
                <div class="case-card" onclick="window.location.href='customer-case-detail.html?id=1'">
                    <div class="case-image" style="background-image: url('https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=300&fit=crop');">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="case-content">
                        <div class="text-base font-bold text-gray-800 mb-1">¥28,800</div>
                        <div class="text-xs text-gray-500 mb-1">
                            <span>RPA自动化</span>
                            <span class="mx-1">·</span>
                            <span>2周交付</span>
                        </div>
                        <div class="text-xs text-gray-600 line-clamp-2">智能流程自动化解决方案，提升业务处理效率...</div>
                    </div>
                </div>
                <!-- 案例卡片2 -->
                <div class="case-card" onclick="window.location.href='customer-case-detail.html?id=2'">
                    <div class="case-image" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop');">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="case-content">
                        <div class="text-base font-bold text-gray-800 mb-1">¥35,000</div>
                        <div class="text-xs text-gray-500 mb-1">
                            <span>管理咨询</span>
                            <span class="mx-1">·</span>
                            <span>1个月</span>
                        </div>
                        <div class="text-xs text-gray-600 line-clamp-2">数字化转型咨询服务，优化供应链管理...</div>
                    </div>
                </div>
                <!-- 案例卡片3 -->
                <div class="case-card" onclick="window.location.href='customer-case-detail.html?id=3'">
                    <div class="case-image" style="background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=300&fit=crop');">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="case-content">
                        <div class="text-base font-bold text-gray-800 mb-1">¥22,000</div>
                        <div class="text-xs text-gray-500 mb-1">
                            <span>企业服务</span>
                            <span class="mx-1">·</span>
                            <span>3周交付</span>
                        </div>
                        <div class="text-xs text-gray-600 line-clamp-2">定制化企业服务解决方案，提升客户满意度...</div>
                    </div>
                </div>
                <!-- 案例卡片4 -->
                <div class="case-card" onclick="window.location.href='customer-case-detail.html?id=4'">
                    <div class="case-image" style="background-image: url('https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop');">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="case-content">
                        <div class="text-base font-bold text-gray-800 mb-1">¥45,000</div>
                        <div class="text-xs text-gray-500 mb-1">
                            <span>AI+RPA</span>
                            <span class="mx-1">·</span>
                            <span>2个月</span>
                        </div>
                        <div class="text-xs text-gray-600 line-clamp-2">AI智能+RPA自动化综合解决方案...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏（Tab Bar） -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 bottom-nav-wrapper" style="max-width: 414px; margin: 0 auto;">
        <div class="grid grid-cols-4">
            <!-- 首页（当前选中） -->
            <div class="bottom-nav-item" onclick="window.location.href='#'" role="button" tabindex="0" aria-label="首页" aria-current="page" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='#'}">
                <i class="fas fa-home primary-color text-xl" aria-hidden="true"></i>
                <div class="primary-color text-xs mt-1 font-medium">首页</div>
            </div>
            <!-- 需求 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-requirement-list.html'" role="button" tabindex="0" aria-label="我的需求列表" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-requirement-list.html'}">
                <i class="fas fa-list text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">需求</div>
            </div>
            <!-- 案例 -->
            <div class="bottom-nav-item" onclick="window.location.href='#'" role="button" tabindex="0" aria-label="服务案例" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='#'}">
                <i class="fas fa-heart text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">案例</div>
            </div>
            <!-- 我的 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-profile.html'" role="button" tabindex="0" aria-label="个人中心" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-profile.html'}">
                <i class="fas fa-user text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">我的</div>
            </div>
        </div>
    </div>

    <!-- 标签切换脚本 -->
    <script>
        // 标签切换函数
        function filterCases(category) {
            // 更新标签状态
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 这里可以添加实际的筛选逻辑
            console.log('筛选类别:', category);
        }
    </script>
</body>
</html>